<template>
  <div>
    <el-row class="float-row">
      <el-row class="float-icon"><a href="javascript:void(0)" @click="likeIt"><i class="el-icon-caret-top"></i></a></el-row>
      <el-row class="float-word"><a href="javascript:void(0)" @click="checkLikeList">赞</a></el-row>
    </el-row>

    <el-row class="float-row">
      <el-row class="float-icon"><a href="javascript:void(0)" @click="awarding"><i class="el-icon-coin"></i></a></el-row>
      <el-row class="float-word"><a href="javascript:void(0)" @click="checkAwardList">赏</a></el-row>
    </el-row>
  </div>

</template>

<script>
  export default {
    name: "RecommendFloatIcon",
    methods: {
      checkLikeList() {
        alert('即将查看点赞列表');
      },
      checkAwardList() {
        alert('即将查看点赞列表');
      },
      likeIt(){
        alert('进行了点赞')
      },
      awarding(){
        alert('进行了赞赏')
      }

    }
  }
</script>

<style scoped lang="less">

  div {
  }

  .float-row {
    text-align: center;
    font-size: 40px;
    padding-bottom: 10px;
    //选择2个class的方法
     .el-icon-caret-top,.el-icon-coin{
       color: #515151;
       background: #ffffff;
       font-weight: 700;
       border-radius: 50%;
       border: #ececec 1px solid;
     }
  }

  .float-word {
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    a {
      color: #969696;
      text-decoration:none;
    }

  }

</style>